<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html>
  <head> <title>WP CVN</title> </head>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="m/datatables/media/css/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="m/css/layout-default-latest.css" />


<style type="text/css" title="currentStyle">
	body {font-size: 80%;}	
	table {font-size: 1em;}	

    table td {white-space: nowrap;}
    .toolbar {float:left; margin-top:3px; margin-right:3px;}
    .refresh {float:left; margin-right:3px;}

	.a-user {color: black;}
    #status {padding: 2px;}
    #status span {margin-right:5ex;}
    .sm-button {margin-left:1px;}
    .smaller-text {font-size:75%;}

	/* Layout Theme */
	.ui-layout-pane { 
		padding:	0px; 
		overflow:	hidden;
	} 
	.ui-layout-pane-north { 
		padding:	0px; 
		overflow:	hidden;
	}
	
	.ui-layout-south {
		display:	none;
		overflow:	hidden;
	}
	
	iframe {
		padding:	0 !important; /* iframes should not have padding */
		overflow:	auto !important;		
	}

	/* Fixing wrong .ui-dialog .ui-dialog-buttonpane buttons order */
	.ui-dialog .ui-dialog-buttonpane{text-align:right;} .ui-dialog .ui-dialog-buttonpane button{float:none;} 
	
</style>

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="m/js/jquery.layout-latest.js"></script>
<script type="text/javascript" language="javascript" src="m/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="m/js/jquery.timeFormat.js"></script>
<script type="text/javascript" language="javascript" src="m/js/jquery.cookie.js"></script>
<script type="text/javascript" language="javascript" src="m/js/jquery.Guid.js"></script>
<script type="text/javascript" language="javascript" src="m/js/jquery.idle-timer.js"></script>


<script type="text/javascript" charset="utf-8">
	// Settings:
	STAFF = ' <a href="http://en.wikipedia.org/wiki/User_talk:Dc987" target="_blank">User_talk:Dc987</a> '
	REPORT = " Please report it at the " + STAFF + ". "
	
	
	// ==================================================================================
	// User nicknames and autoconfirmation stuff.
	// ==================================================================================	
	var t, users, nick = '', wid = '', guid = String(jQuery.Guid.New());	
	// guid = "4AB96246-AC5F-65E0-EE6B-701A45A83141";	
    function login()
    {
		// $.get("s/ip", function(data){ip = data.ip})        
		nick = $.cookie('nick');    // Try nick from cookie
        if(nick) $('#nick').val(nick)
        else nick = $('#nick').val()        // Fail over to browser cash
        wid = $.cookie('wid')
		
		if(wid)
		{
			// disabling nick editing (too much confusion)	
			$('#nick').attr("disabled",true).addClass('ui-state-disabled');
		}
		else
		{					
			// nick updater (smart)
			$('#nick').bind("active.idleTimer", function() {$("#nick").addClass('ui-state-highlight')})
	    	$('#nick').bind("idle.idleTimer", function() {update_nick($("#nick").removeClass('ui-state-highlight').val());})
	    	$('#nick').idleTimer(2000);
		}
	}

    function update_nick(updatedNick)
    {
        if(nick != updatedNick)
            nick = updatedNick
            $.cookie('nick', nick, { expires: 60 });
		if($('#nick').val() != nick)
			$('#nick').val(nick)
    }


    function logout()
	{
        // $.cookie('nick', nick, { expires: 60 });
        // $.cookie('wid', wid, { expires: 60 });
    }

	function reset()
	{
		$('<div></div>').html("Delete cookies and reload? Sure?").dialog(
			{title: "Sure?",
			buttons : { "Yes": function() {$.cookie("wid", null); $.cookie("nick", null); location.reload();}, 
						"No and Cancel": function() { $(this).dialog("close"); }				}						 										 
			})
	}
	
	function try_autoconfirmation()
	{	
        var $dialog = $('<div></div>')
            .html("<p>Verificaion is a single-step process, basically you need to do a nonempty edit to the Wikipedia:Sandbox and leave the following ugly string as a comment: "
				  + guid + "</p>"

                  + "<p>It's a hassle. But you only have to do it once. And it is a good idea to do it, "
                  + "because other members will be able to see your contributions having Verified Status. "

				  + "<p>Here is a "
				  + '<a class="ui-priority-primary ui-state-highlight" href="http://en.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&action=edit&minor=true&section=0&summary=' + guid +'" target="_blank">link</a>' 
				  + " that would take you to the Wikipedia:Sandbox and prefill the comment. </p>"
				  + "<p>Make sure you are <b>using your Wikipedia account</b>. You also need to actually modify the sandbox content, <b>empty edit won't register</b>. "
				  + "A good idea would be to patrol, to add some fancy markup, or just to add a token, like 'wpcvn'.</p>"
				  + '<p><div class="refresh ui-state-default ui-corner-all">'
                  +  '<span class="ui-icon ui-icon-refresh">close</span></div>'
                  +  '<span class="ui-button-text">Waiting for your edit...</span></p>' 
				   )
				  		
            .dialog({ 	title: 'Autoconfirmation',
						modal: true, 
					  	buttons: { "Cancel": function() { $(this).dialog("close"); } },
					  	width: 600,									
						open: function() { this.updater = window.setInterval(request_autoconfirmation, 1000);},						 
 						close: function() { window.clearInterval(this.updater)}									
						});
						
		function request_autoconfirmation()
		{
			$.post("s/wid", {'guid': guid}, function(data) {
				if(data.nick || data.wid) { 
					successful_autoconfirmation(data);
					$dialog.dialog('close');
					}});
		}

		function successful_autoconfirmation(data)
		{
			var title, buttons, text =  "<br>Excellante. Your edit was identfied successfully."
										+ "<br>Your username is: " + data.nick;

			if(!data.wid)
			{
				title = 'Autoconfirmation is partially successfull';

				text += "<br><br>Unfortunately autoconfirmation was only partially successfull as your username was not found in the WP CVN database. "
						 + "If you are using well-established Wikipedia account registered before 2010, this is a bug." + REPORT 						 
						 + "<br><br>If your Wikipedia account is new, please contact the WP CVN maintainers at the "
						 + STAFF + "for manual account confirmation."
						 
				if(data.nick != nick)
				{ 
					 text += '<br><br>Do you want to use your Wikipedia account username as your nickname?"'						 
					 buttons = { "Yes": function() { update_nick(data.nick); $(this).dialog("close"); }, 
								"No": function() { $(this).dialog("close"); }						};
				}						 										 
				else buttons = { "Ok": function() {$(this).dialog("close");} };						 										 					
			}
			else
			{
				title = 'Autoconfirmation Successfull';
								
				text += '<br><br>Just in case, your key is: ' + data.wid + '<br>It is not required to save it manually.'				
				if(nick && data.nick != nick)
				{ 
					text += "<br><br>Your current nickname is not the same as your Wikipedia account username. "
					text += "To get the Verified status it needs to be the same. "				
					text += "Do you want to use your Wikipedia account username as your Verified nickname?"				
					buttons = { "Yes": function() { update_wid(data); $(this).dialog("close"); }, 
								"No and Cancel": function() { $(this).dialog("close"); }						};						 										 
				}
				else
				{
					update_wid(data);					 
					buttons = { "Ok": function() {$(this).dialog("close");} };
				}						 										 					
			}
				
	        $('<div></div>').html(text).dialog(  {title: title, modal: true, buttons: buttons, width: 450}  );		
		}

		function update_wid(data)
		{
            $.cookie('wid', data.wid, { expires: 60 });							
            $.cookie('nick', data.nick, { expires: 60 });
			login();
			if(wid != data.wid || nick != data.nick)
			{
				wid = data.wid; nick = data.nick;
				var text = "Gosh. Your browser doesn't seem to allow cookies. Or this could also be a bug." + REPORT
				if(wid) text += "<br>Your autoconfirmation key is: " + data.wid + " Please save it for future use." 
				$('<div></div>').html(text).dialog({title: "Your browser's cookie functionality is turned off."})
			}
		}
		
	}	


  // ==================================================================================
  // Misc
  // ==================================================================================	

	function ellipsis(text, n) {
    if(text.length>n)
        return text.substring(0,n)+"...";
    else
        return text;	
	}



  // ==================================================================================
  // Initialization  &  $(document).ready 
  // ==================================================================================	
  $(document).ready(function() {  		
	// Generic Setup
	$.ajaxSetup('timeout', 1000)
    
	// Try authentication  		
    login();
	
	// Enable jQuery Layout 
	myLayout = $("body").layout({
		initClosed:		false
    ,   south__initClosed: true
	,	north__size:	40
	,	south__size:	222
	,	west__size:		200
	,	autoStateManagement:	true	// enable state management	
	,	useStateCookie:		true		// enable state autoSave
    ,   onopen: function (pane) {if(pane == "south")  toggle_iframe_south(); return true;}
	});

    function toggle_iframe_south() { $("#iframe-south").attr("src",
        myLayout.state.south.isVisible ? "http://webchat.freenode.net?channels=countervandalism&prompt=1&nick=" + nick : "");
    }
    toggle_iframe_south();


	// Main Window datatable 	
  	t = $('#table').dataTable({
		
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                            var $cell=$('td:eq(0)', nRow);
                            $cell.text( $.timeFormat($cell.text()) );

							
                            var $cell=$('td:eq(5)', nRow);
							if($cell.text() < 0) $cell.css("color", "#FF0000");
							else if($cell.text() > 100) $cell.css("color", "#348017");
						
							
                            var $cell=$('td:eq(4)', nRow);
							$cell.html('<a class="a-user" href="http://en.wikipedia.org/wiki/User_talk:' + $cell.text() + ' " target="_blank">' + ellipsis($cell.text(),25) + '</a>');

                            var $cell=$('td:eq(6)', nRow);
							page = $cell.text()
                            $cell.text(ellipsis($cell.text(),25));
							
                            var $cell=$('td:eq(7)', nRow);
                            $cell.text(ellipsis($cell.text(),50));
							
                            var $cell=$('td:eq(3)', nRow);
                            $cell.html('<a href="' + $cell.text() + ' " target="_blank">diff...</a>');
							$cell.attr("alt", page)     // saving page name
							$cell.click(function() {$.post("s/c", { "nick" : nick, 
                                                                    "wid" : wid, 
                                                                    "page" :  $(this).attr("alt")}  );  });
                            return nRow;
                    },
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
		"aaSorting" : [],
        "bProcessing": false,
        "bServerSide": true,
		"bAutoWidth": false,
        "sAjaxSource": "s/w",
        "iDisplayLength": 25,
		"sDom": '<"H" <"toolbar"> lfr >t<"F"ip>',
        "oLanguage" : {"sSearch": "Filter by User or Page Title (case sensitive):"},
        "fnServerData": function (sSource, aoData, fnCallback) {
			aoData.push( { "name": "nick", "value": nick } );
			aoData.push( { "name": "wid", "value": wid } );
			$.ajax ( {"dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback} );		
         }
     } );
	 
	 // Main Window datatable Toolbar/Refresh
	 $("div.toolbar").html('<div class="refresh ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh">close</span></div>')

	 $(document).ajaxSend(function(r,s) {$(".refresh").addClass('ui-state-highlight')});
	 $(document).ajaxStop(function(r,s) {$(".refresh").removeClass('ui-state-highlight')});
	 $(document).ajaxError(function(r,s) {$(".refresh").addClass('ui-state-error')});
	 $(document).ajaxSuccess(function(r,s) {$(".refresh").removeClass('ui-state-error')});


	// Users datatable
  	users = $('#users').dataTable({
		
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                            var $cell=$('td:eq(1)', nRow);
                            $cell.text($.timeFormat(aData[1]) );
							
                            var $cell=$('td:eq(0)', nRow);
							if(aData[2] == true)
							{
								$cell.html('<a href="http://en.wikipedia.org/wiki/User_talk:' + $cell.text() + ' " target="_blank">' + ellipsis($cell.text(),20) + '</a>');
							}
							else
							{
                            	$cell.text(aData[0]);																
							}
 							
							// $cell.html("<span rec='"+$cell.text()+"'class='ui-icon ui-icon-circle-close'>" + $cell.text() + "</span>");
                            return nRow;
                    },
		"aoColumns": [{ "bSortable": false }, { "bSortable": false },  { "bVisible": false }],
        "bJQueryUI": true,
        "bProcessing": false,
        "bFilter": false,
		"bLengthChange": false,
		// "bSort": false,
		"bInfo": false,
        "bServerSide": true,
		"bAutoWidth": false,
        "sAjaxSource": "s/users",
        "fnServerData": function (sSource, aoData, fnCallback) {
			aoData.push( { "name": "nick", "value": nick } );
			aoData.push( { "name": "wid", "value": wid } );
            $.ajax ( {"dataType": 'json', "type": "GET", "url": sSource, "data": aoData, "success": fnCallback} );
         }
     } );

    // User Activity / Refresh rate
    $.idleTimer(2000);


	// Start Refreshing
	window.setInterval(function() 
        {
            t.fnDraw(false); 
            users.fnDraw(false);}, 
        3000);

    // Mics
    $("#autoconfirmation").click(try_autoconfirmation)
    $("#reset").click(reset)
    $(window).unload(logout);


    // karma updater (smart)
    function update_karma(data) {$("#karma").val(data.username + ' (' + (data.karma != null ? data.karma : "unknown") + ')')}
    function get_karma(username) {if(username.search(/^\s*$|Type in username| \(/) < 0) $.get("s/karma", {'username' : username}, update_karma) }
    $('#karma').bind("active.idleTimer", function() {$("#karma").addClass('ui-state-highlight')})
    $('#karma').bind("idle.idleTimer", function() {get_karma($("#karma").removeClass('ui-state-highlight').val());})
    $('#karma').idleTimer(2000);


  } );
</script>


<body>  
	<div class="ui-layout-north">
        <div id="status" class="ui-widget-header ui-widget-toolbar ui-corner-all">
            <span>Nick:         
                <input id="nick" type="text" class="ui-widget ui-state-active"/>
                <button id="autoconfirmation" class="smaller-text ui-widget ui-state-default sm-button ui-button ui-button-text-icon ui-corner-all">
                    <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
                    <span class="ui-button-text">Autoconfirmation...</span>
                </button>
                <button id="reset" class="smaller-text ui-widget ui-state-default sm-button ui-button ui-button-text-icon ui-corner-all">
                    <span class="ui-button-icon-primary ui-icon ui-icon-unlocked"></span>
                    <span class="ui-button-text">Reset Cookies...</span>
                </button>
            </span>

            <span>Check Karma:
                <input id="karma" type="text" class="ui-widget ui-state-default" value="Type in username"/>
            </span>
			
            <span class="smaller-text">
                WPCVN Version 0.03 Alpha. 
			    Bugs? <a href="http://en.wikipedia.org/wiki/User_talk:Dc987" target="_blank">Report -></a>
            </span> 			
        </div>
	</div>



	<div class="ui-layout-center">
		<table cellspacing="0" border="0" class="display ui-helper-reset" id="table">
		        <thead>
		                <tr>
		                        <th width="5%">Edit time</th>
		                        <th width="6%">Patrolled by</th>
		                        <th width="5%">Labels</th>
		                        <th width="5%">Url</th>
		                        <th width="10%">User</th>
		                        <th width="4%">Karma</th>
		                        <th width="20%">Page</th>
		                        <th width="45%">Summary</th>
		                </tr>
		        </thead>
		        <tbody>
		        </tbody>
		</table>
	</div>
	
	
	<div class="ui-layout-west">
		<table cellspacing="0" border="0" class="display" id="users">
		        <thead>
		                <tr>
		                        <th width="60%">Nick</th>
		                        <th width="40%">Last Seen</th>
		                        <th width="0%">Confirmed</th>
		                </tr>
		        </thead>
		        <tbody>
		        </tbody>
		</table>
	</div>
	
	<div class="ui-layout-south">	
		<iframe id="iframe-south" width="100%" height="100%" frameborder="0"></iframe>
	</div>

</body>
</html>
